export let name = "+fansMm";

export function render() {
  return `
    <style>
      /* 公共样式 */
      .float-left {
        float: left;
      }

      .float-right {
        float: right;
      }

      .clearfix::after {
        content: 
        display: block;
        clear: both;
      }

      .total {
        width: 100%;
        height: 100%;
        position: relative;
        padding: 0 10px;
        background-color: #fff;
      }

      html, body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        height: 100%;
      }

      .total .header-top {
        height: 70px;
      }

      .total .header-top span {
        float: left;
        margin-top: 20px;
        font-size: 16px;
        font-weight: 300;
      }

      .total .header-top input {
        float: right;
        margin-top: 20px;
        height: 30px;
        border-radius: 5px;
        outline: none;
        border: 1px solid #7438d5;
      }

      .nav {
        height: 40px;
      }

      .nav .nleft {
        float: left;
        width: 40px;
        height: 40px;
        color: black;
        border: 1px solid #ccc;
      }

      .nav .nright {
        float: left;
        width: 100px;
        height: 100%;
        margin-left: 20px;
        color: #f6f5f8;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        background-color: #7438d5;
      }

      .bg {
        margin-top: 10px;
        border: 1px solid #ccc;
      }

      .bg ul li {
        height: 45px;
      }

      .bg ul li .id {
        width: 8%;
        height: 45px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 45px;
      }

      .bg ul li .fans {
        width: 10%;
        height: 45px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        line-height: 45px;
      }

      .bg ul li .fans-area {
        width: 30%;
        height: 45px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        line-height: 45px;
      }

      .bg ul li .state {
        width: 10%;
        color: red;
        height: 45px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 45px;
      }

      .bg ul li .time {
        width: 18%;
        height: 45px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        line-height: 45px;
      }

      .bg ul li .time-2 {
        width: 18%;
        height: 45px;
        border: 1px solid #ccc;
        text-align: center;
        line-height: 45px;
      }

      .bg ul li .op {
        width: 6%;
        color: #7438d5;
        height: 45px;
        border-bottom: 1px solid #ccc;
        text-align: center;
        line-height: 45px;
      }

      .pagination-row {
        margin-top: 20px;
        text-align: center;
        float: right;
      }

      .active-1 {
        background-color: aqua;
        animation: aa 1s infinite linear;
        width: 400px;
        height: 50px;
        position: absolute;
        right: 0;
        z-index: 1;
      }
    </style>
  `;
}

export function afterRender() {

  //执行js的
   let total = document.querySelector('.total')
        function Time(options = {}) {
            const {
                startDate = new Date(2000, 0, 1),
                endDate = new Date(),
                includeTime = true,
                format = 'yyyy-MM-dd HH:mm:ss'
            } = options;

            // 生成指定范围内的随机时间戳
            const startTimestamp = startDate.getTime();
            const endTimestamp = endDate.getTime();
            const randomTimestamp = startTimestamp + Math.random() * (endTimestamp - startTimestamp);
            const randomDate = new Date(randomTimestamp);

            // 格式化日期的辅助函数
            function formatDate(date, formatStr) {
                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');

                return formatStr
                    .replace('yyyy', year)
                    .replace('MM', month)
                    .replace('dd', day)
                    .replace('HH', hours)
                    .replace('mm', minutes)
                    .replace('ss', seconds);
            }

            // 根据选项返回格式化的日期
            if (includeTime) {
                return formatDate(randomDate, format);
            } else {
                return formatDate(randomDate, format.split(' ')[0]);
            }
        }




        let ul = document.querySelector('.bb')

        // 原 bb() 函数修改为生成真实数据对象
        function bb() {
            // 总条数
            let total = [];
            for (let i = 0; i < 200; i++) {
                total.push({
                    id: i + 1, // 真实ID（从1开始）
                    fans: `用户${i + 1}`, // 模拟关注粉丝名称
                    fansarea: `-`, // 随机地区
                    state: '已关注',
                    time: Time({ format: 'yyyy-MM-dd' }), // 关注时间（仅日期）
                    time2: Time() // 更新时间（含时分秒）
                });
            }
            return total;
        }
        bb
        // 初始化数据
        let allData = bb();

        let page = 1; // 当前页码

        let pageSize = 10;//总页数
        let tp = Math.ceil(allData.length / pageSize);
        console.log(tp)

        //当前页  
        // 补充分页功能代码
        function pg() {

            const header = ul.querySelector('.list');
            ul.innerHTML = '';
            ul.appendChild(header);

            const startindex = (page - 1) * pageSize;
            const endindex = page * pageSize;
            const pageData = allData.slice(startindex, endindex);

            pageData.forEach(function (item) {
                const li = document.createElement('li');
                li.className = 'list';
                // 修正：使用 item.id 渲染ID列
                li.innerHTML = `
                    <div class="id left">${item.id}</div> 
                    <div class="fans left">${item.fans}</div>
                    <div class="fansarea left">${item.fansarea}</div>
                    <div class="state left">${item.state}</div>
                    <div class="time left">${item.time}</div>
                    <div class="time2 left">${item.time2}</div>
                    <div class="op right">查看</div>
                `;
                ul.appendChild(li);
            });

            addPaginationRow();
        }
        // 添加分页控件行
        function addPaginationRow() {
            const existingPagination = document.querySelector('.pagination-row');
            if (existingPagination) {
                existingPagination.remove();
            }

            // 创建分页行
            const paginationRow = document.createElement('div');
            paginationRow.className = 'pagination-row';
            const paginationContainer = document.createElement('div');
            paginationContainer.className = 'pagination-container';
            paginationContainer.style.cssText = 'grid-column: 1 / span 7; padding: 10px 0; text-align: center;';

            // 首页按钮
            const firstBtn = createPageButton('首页', function () {
                if (page !== 1) {
                    page = 1;
                    pageInput.value = page;
                    pg();
                }
            });

            // 上一页按钮
            const prevBtn = createPageButton('上一页', function () {
                if (page > 1) {
                    page--;
                    pageInput.value = page;
                    pg();
                }
            });

            // 下一页按钮
            const nextBtn = createPageButton('下一页', function () {
                if (page < tp) {
                    page++;
                    pageInput.value = page;
                    pg();
                }
            });

            // 尾页按钮
            const lastBtn = createPageButton('尾页', function () {
                if (page !== tp) {
                    page = tp;
                    pageInput.value = page;
                    pg();
                }
            });

            // 页码输入框
            const pageInput = document.createElement('input');
            pageInput.type = 'number';
            pageInput.value = page;
            pageInput.min = 1;
            pageInput.max = tp;
            pageInput.style.cssText = 'width: 50px; margin: 0 5px; padding: 2px; text-align: center;';
            pageInput.addEventListener('change', function () {
                let val = parseInt(pageInput.value);
                if (val >= 1 && val <= tp) {
                    page = val;
                    pg();
                }
            });

            // 组装分页控件
            paginationContainer.appendChild(firstBtn);
            paginationContainer.appendChild(prevBtn);
            paginationContainer.appendChild(document.createTextNode('第'));
            paginationContainer.appendChild(pageInput);
            paginationContainer.appendChild(document.createTextNode('页'));
            paginationContainer.appendChild(nextBtn);
            paginationContainer.appendChild(lastBtn);

            // 添加到分页行
            paginationRow.appendChild(paginationContainer);
            document.querySelector('.total').appendChild(paginationRow);
        }
        function createPageButton(text, clickHandler) {
            const btn = document.createElement('button');
            btn.innerHTML = text;
            btn.style.cssText = 'margin: 0 5px; padding: 5px 10px; border: 1px solid #ccc; background-color: #f8f8f8; cursor: pointer;';
            btn.addEventListener('click', clickHandler);
            return btn;
        }
        pg();
        let pageInput;

        let int = document.querySelector('.hint');

        function sosuo() {
            const keywords = int.value.trim();
            if (!keywords) {
                allData = bb();
                page = 1;
                pg();
                return;
            }
            // 仅匹配ID字段（精确匹配）
            const filteredData = allData.filter(function (item) {
                return String(item.id) === keywords;
            });

            allData = filteredData;
            tp = Math.ceil(allData.length / pageSize);
            page = 1;
            pg();
        }
        int.addEventListener('keyup', function (e) {
            if (e.key === 'Enter')
                sosuo();
        });
        let nleft = document.querySelector('.nleft')
        nleft.addEventListener('click', function () {
           location.reload();
        })

                nleft.addEventListener('click', function () {
                    location.reload();
                });
                let rleft = document.querySelector('.nright');

                let notificationList = [];

                rleft.addEventListener('click', function () {
                    // 创建新提示框
                    let td = document.createElement('div');
                    td.innerHTML = `同步成功`;
                    td.classList.add('active1');
                    total.appendChild(td);

                    // 新增：将新提示框加入数组
                    notificationList.push(td);

                    // 重新计算所有提示框的位置（实现堆叠效果）
                    notificationList.forEach((item, index) => {
                        // 每个提示框间隔 60px（50px高度 + 10px间距）
                        item.style.top = `${index * 60}px`;
                    });

                    // 可选：3秒后自动移除最早的提示框
                    setTimeout(() => {
                        if (notificationList.length > 0) {
                            let first = notificationList.shift(); // 移除数组第一个元素
                            total.removeChild(first);

                            // 重新计算剩余提示框的位置
                            notificationList.forEach((item, index) => {
                                item.style.top = `${index * 60}px`;
                            });
                        }
                    }, 3000);
                });


}
